<template>
	<div class="main">
		<h2>编程</h2>
		<ul>
			<li v-for="post in res" :key="post.id">
				
				<h3>
					<router-link to="">
						{{ post.title }}
					</router-link>
				</h3>
				<div class="b">{{ post.des }}</div>
				<img :src="post.pic" alt="">
				<p>
					作者： {{ post.author }}
					|
					发表于： {{ post.time }}
					<span class="float-right">
						<router-link to="">
							查看原文
							<i class="el-icon-d-arrow-right"></i>
						</router-link>
					</span>
				</p>
			</li>
		</ul>
	</div>
</template>

<script>
	let resData = [
		{
			"id": "1",
			"title": "PHP学科：MyAQL手册免费分享",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "",
			"pic": ""
		},
		{
			"id": "2",
			"title": "前端必学框架Boostrap，3天带你从入门到精通，免费分享！",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "",
			"pic": ""
		},
		{
			"id": "3",
			"title": "想少走弯路，就看这个贴：PHPer职业发展规划也技能需求！",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "",
			"pic": ""
		},
		{
			"id": "4",
			"title": "PHP进阶：要想提高PHP编程效率，你必须知道的49个要点",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "",
			"pic": ""
		},
		{
			"id": "5",
			"title": "最涨薪PHP项目-PHP微信公众平台开发",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "在“智能手机”时代，没人不识微信！",
			"pic": require("../../assets/home/ditu.png")
		},
	]
	export default {
		data() {
			return {
				res: resData
			}
		}
	}
</script>

<style scoped>
	.main {
		background: #fff;
	}

	.float-right {
		float: right;
	}

	a {
		color: #000;
		text-decoration: none;
	}

	ul {
		list-style: none;
		padding: 10;
	}

	p {
		margin-top: -15px;
	}

	b {
		font-size: 10px;
		margin-top: -10px;
	}

	h3 {
		margin-top: 8px;
	}

	img {
		margin-bottom: 20px;
	}
	h2{
		/* background: ; */
		color: blue;
		padding: 20px;
	}
</style>
